<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="45%"
      v-dialogDrag
      append-to-body
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        v-loading="formLoading"
        label-width="140px"
      >
        <el-form-item label="用户昵称" prop="nickname" readonly>
          <el-input v-model="formData.nickname" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="当前算力" prop="currentPoint" readonly>
          <el-input v-model="formData.currentPoint" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="变动算力（正数为增加，负数为减少）" prop="point" >
          <el-input type="number" v-model="formData.point" placeholder="请输入" />
        </el-form-item>
      
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading"
          >确 定</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as memberApi from "@/api/member";
export default {
  name: "ActivityForm",

  data() {
 
    return {
  
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
  
      // 表单参数
      formData: {
        id: undefined,
        point: undefined,
       
      },
  
      formRules: {
       
        point: [
          { required: true, message: "算力不能为空", trigger: "blur" },
        ],
      
      
      },
    };
  },
  methods: {
   
    /** 打开弹窗 */
    async open(id) {
      this.dialogVisible = true;
      this.reset();
      // 修改时，设置数据
      if (id) {
        this.formLoading = true;
        try {
          const res = await memberApi.getMemberDetail(id);
          this.formData = res.data;
          this.formData.currentPoint=JSON.parse(JSON.stringify(this.formData.point)) 
          this.formData.point=null;
          this.title = "修改会员用户算力";
        } finally {
          this.formLoading = false;
        }
      }else{
        this.title = "修改会员用户算力";
      }
    
    },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs["formRef"].validate();
      this.formLoading = true;
      try {
       
        const data ={
          id:this.formData.id,
          point:this.formData.point,
        };
        // 修改的提交
        if (data.id) {
          await memberApi.updateMemberPoint(data);
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          this.$emit("success");
          return;
        }
     
      } finally {
        this.formLoading = false;
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        id: undefined,
        point: undefined,
      };
      this.resetForm("formRef");
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
